<!DOCTYPE html>
<html lang="zh-CN" xmlns:layOut="http://www.w3.org/1999/xhtml" layOut:decorator="layOut/block">
<head>
    <title>Block-Index</title>
    <style>
        body{padding: 20px;}

        #test2 div[carousel-item]>*{line-height: 120px;}
    </style>
</head>
<body>
<div class="layui-carousel" id="test4">
    <div carousel-item>
        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div>
        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-2.jpg"></div>
        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg"></div>
        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg"></div>
        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg"></div>
    </div>
</div>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        // 图片轮播
        carousel.render({
            elem: '#test4'
            ,width: '720px'
            ,height: '360px'
            ,interval: 5000
        });
    });
</script>

<!--<body class="pear-container">  -->
<!--<div class="layui-card">-->
<!--    <div class="layui-card-body">-->
<!--        <form class="layui-form" action="">-->
<!--            <div class="layui-form-item">-->
<!--                <div class="layui-form-item layui-inline">-->
<!--                    <div class="layui-carousel" id="test1" lay-filter="test1">-->
<!--                        <div carousel-item="" style="width: 800px">-->
<!--                            <div>条目1</div>-->
<!--                            <div>条目2</div>-->
<!--                            <div>条目3</div>-->
<!--                            <div>条目4</div>-->
<!--                            <div>条目5</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </form>-->
<!--    </div>-->
<!--</div>-->
<!--<script>-->
<!--    layui.use(['loading','carousel'], function() {-->
<!--        const loading = layui.loading;-->
<!--        var carousel = layui.carousel;-->

<!--        // loading.Load(4, "");-->
<!--        carousel.render({-->
<!--            elem: '#test1',     //绑定元素-->
<!--            autoplay: true,     //自动切换-->
<!--            interval: 3000,     //自动切换时间间隔-->
<!--            index: 0,           //初始条目索引-->
<!--            arrow: 'hover',     //切换箭头显示状态-->
<!--            anim: 'default',    //动画类型-->
<!--            indicator: 'inside',//指示器位置-->
<!--            height: '120px',-->
<!--            width: '100%'-->
<!--        })-->
<!--        // loading.loadRemove(2000);-->
<!--    })-->
<!--</script>-->
</body>
</html>